import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { useHistory } from 'react-router-dom'
import { alertDispatch } from '../../utils'
import ArrowRightIcon from '@material-ui/icons/ArrowRight';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import Professional from '@/components/Professional'
import { GetLeftXueKeApi, GetProfessionDataApi, setProfessionApi } from '@/Api'
import './toggle.less'
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogTitle from '@material-ui/core/DialogTitle';
function Toggle(props) {
    const { push } = useHistory()
    const [data, setData] = useState([])
    const [title, setTitle] = useState(props.location.state.title)
    const [pro, setPro] = useState([])
    const [navShowState, setnavShowState] = useState(false)
    const [actionCode, setActionCode] = useState(localStorage.getItem('toggle'))

    const [open, setOpen] = React.useState(false);

    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };
    const GetProfessionData = async () => {
        try {
            const res = await GetProfessionDataApi()
            const { data } = res
            if (res.errCode === 0) {
                setPro(data)
            }
        } catch (err) {
            if (err.response.data.errCode === 1002) {
                props.error(err.response.data.message)
                push('/login')
            }
        }
    }
    // 侧边栏数据获取
    const GetLeftXueKe = async () => {
        const res = await GetLeftXueKeApi()
        const { data } = res
        setData(data)
    }

    useEffect(() => {
        GetProfessionData()
        GetLeftXueKe()
    }, [props])// eslint-disable-line react-hooks/exhaustive-deps
    return (
        <div>
            <Dialog
                open={open}
                onClose={handleClose}
            >
                <DialogTitle id="alert-dialog-title" className="SurePro">{"确认修改默认学科吗"}</DialogTitle>
                <DialogActions>
                    <Button onClick={handleClose} color="primary" className="kuang">
                        取消
                    </Button>
                    <Button onClick={() => {
                        setProfessionApi()
                        setTimeout(() => {
                            push('/home')
                        }, 500);
                    }} color="primary" className="kuang">
                        确认
                    </Button>
                </DialogActions>
            </Dialog>
            <div className="top-header">

                <span>首页默认显示学科-{title}</span>
                <span className="setdefault" onClick={handleClickOpen}>
                    <span>设置默认学科</span>
                    <ArrowRightIcon />
                </span>
            </div>
            <div className="Choosesubject" onClick={() => {
                setnavShowState(true)
            }}>
                <ChevronLeftIcon />
                <span>{title}</span>
                <ChevronRightIcon />
            </div>
            <div className="ProfessionalSub">
                <p>专业科目</p>
                {
                    pro.map(item => {
                        return <Professional key={item.actionCode} data={item}></Professional>
                    })
                }
            </div>
            <div className={["left-nav", 'flex', !navShowState ? 'hide' : ''].join(' ')}>
                <div className="left">
                    {
                        data.map(item => {
                            return <div key={item.id} className={['nav-item', actionCode === item.actionCode ? 'active' : ''].join(' ')} onClick={() => {
                                setActionCode(item.actionCode)
                                setTitle(item.title)
                                localStorage.setItem('toggle', item.actionCode)
                                GetProfessionData()
                                setTimeout(() => {
                                    setnavShowState(false)
                                }, 500);
                            }}>
                                {item.title}
                            </div>
                        })
                    }
                </div>
                <div className="right" onClick={() => {
                    setnavShowState(false)
                }}></div>
            </div>
        </div >
    )
}


export default connect(null, alertDispatch)(Toggle)